<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-model</title>
  <script src="../assets/js/vue.js"></script>
</head>
<body>
  <h1>v-model</h1>
  <hr>
  <div id="app">
    <p>原始文本信息{{ message }}</p>
    <h3>文本框</h3>
    v-model<input type="text" v-model="message" />
    <br>
    v-model.lazy<input type="text" v-model.lazy="message" />
    <br>
    v-model.number<input type="text" v-model.number="message" />
    <br>
    v-model.trim<input type="text" v-model.trim="message" />
    <hr>
    <h3>文本域</h3>
    <textarea v-model="message"></textarea>
    <hr>
    <h3>多选框</h3>
    <input type="checkbox" id="isTrue" v-model="isTrue">
    <label for="isTrue">{{ isTrue }}</label>
    <hr>
    <p>
       <input type="checkbox" id="jsPang" value="jsPang" v-model="web_names">
       <label for="jsPang">jsPang</label>
       <input type="checkbox" id="panda" value="panda" v-model="web_names">
       <label for="panda">panda</label>
       <input type="checkbox" id="king" value="king" v-model="web_names">
       <label for="king">king</label>
       <div>{{ web_names }}</div>
    </p>
    <h3>单选框</h3>
   <p>
     <input type="radio" id="one" value="男" v-model="sex">
     <label for="one">男</label>
     <input type="radio" id="two" value="女" v-model="sex">
     <label for="two">女</label>
     <div>{{ sex }}</div>
   </p>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'input text',
        isTrue: true,
        web_names: [],
        sex: '男'
      }
    })
  </script>
</body>
</html>